<template>
  <div class="user">
  <!-- 顶部功能 -->
  <van-cell-group>
    <van-cell class="user-info">
      <van-image :src="userInfo.portrait || 'https://s0.lgstatic.com/common/image/pc/default_boy_headpic1.png'"></van-image>
      <div class="user-info-content">
        <h3>{{ userInfo.userName }}</h3>
        <span>
          <van-icon name="edit"/>
          编辑个人资料
        </span>
      </div>
    </van-cell>
    <van-cell class="account-info">
      <van-grid>
        <van-grid-item>
          <span class="van-grid-value">14.05</span>
          <span>学习时长</span>
        </van-grid-item>
        <van-grid-item>
          <span class="van-grid-value">200</span>
          <span>钱包勾豆</span>
        </van-grid-item>
        <van-grid-item>
          <span class="van-grid-value">1</span>
          <span>优惠券</span>
        </van-grid-item>
        <van-grid-item>
          <span class="van-grid-value">213</span>
          <span>学分</span>
        </van-grid-item>
      </van-grid>
    </van-cell>
    <van-cell title="分销中心" icon="user-o" value="收益200元" is-link />
    <van-cell title="个性化设置" icon="setting-o" is-link />
    <van-cell title="我的下载" icon="down" is-link />
    <van-cell title="帮助与反馈" icon="question-o" is-link />
    <van-cell title="关于拉钩教育" icon="info-o" value="v2.0.0" is-link />
  </van-cell-group>
  <!-- 底部导航 -->
  <layout-footer></layout-footer>
  </div>
</template>

<script>
import { getInfo } from '@/services/user'
import LayoutFooter from '@/components/LayoutFooter'
export default {
  name: 'User',
  created () {
    this.loadUserInfo()
  },
  data () {
    return {
      userInfo: {}
    }
  },
  components: {
    LayoutFooter
  },
  methods: {
    async loadUserInfo () {
      const { data } = await getInfo()
      this.userInfo = data.content
    }
  }
}

</script>
<style lang='scss' scoped>
.user-info {
  padding: 30px 20px 0;
  background-color: rgb(248, 150, 3);
}
.user-info .van-cell__value {
  display: flex;
}
.van-cell__value .van-image {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.user-info .user-info-content {
  padding-left: 15px;
}
.user-info .user-info-content h3 {
  margin: 5px;
  font-size: 18px;
}
.account-info {
  background-color: rgb(248, 150, 3);
  margin-top: -1px;
}
.van-grid {
  border-radius: 15px;
  overflow: hidden;
}
.van-grid-value {
  font-size: 22px;
  font-weight: 700;
}
</style>
